<script setup>
import { ref, watch } from 'vue'
const props = defineProps({
    size: Boolean,
    disabled: Boolean,
    background: Boolean,
    layout: {
        type: String,
        default: 'prev, pager, next, jumper,total'
    },
    currentPage: {
        type: Number,
        default: 1,
    },
    pageSize: {
        type: Number,
        default: 10
    },
    pageSizes: {
        type: Array,
        default: ()=> [10,30,50]
    },
    total: {
        type: Number,
        default: 0
    }
})

const paginationAttrs = ref({
  total: props.total,
  pageSize: props.pageSize,
  currentPage: props.currentPage,
});

watch(
  () => props.total,
  (newTotal) => {
    paginationAttrs.value.total = newTotal;
  },
);

watch(
  () => props.pageSize,
  (newPageSize) => {
    paginationAttrs.value.pageSize = newPageSize;
  },
);

watch(
  () => props.currentPage,
  (newPage) => {
    paginationAttrs.value.currentPage = newPage;
  },
);

// const currentPage = ref(1)
// const pageSize = ref(10)

// const total = ref(50)

const emit = defineEmits(['sizeChange', 'pageChange'])

const handleSizeChange = (newPageSize) => {
    emit('sizeChange', newPageSize)
}

const handleCurrentChange = (newCurrentPage) => {
    // console.log('这是啥', e)
    emit('pageChange', newCurrentPage)
}
</script>

<template>
    <div class="pagination-line">
        <el-pagination
            :small="size"
            :disabled="disabled"
            :background="background"
            :total="total"
            :page-sizes="pageSizes"
            v-model:current-page="paginationAttrs.currentPage"
            v-model:page-size="paginationAttrs.pageSize"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :layout="layout"
        />
        分页器
    </div>
</template>

<style lang="scss" scoped>

</style>